<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 ">
        <div class="main-left ">
          <div class="con2">
          <div class="nav-tit">
            <div class="mleft">
            <h1 class="cur"  @click="goCourse()"> 我的备课包 </h1>
              <p>共有{{listData.length}}个备课 </p>
            </div>
            <div class="mright">
              <img src="static/img/t-huisz.png"   @click="goSc()">
              <img src="static/img/t-pl.png" width="24"   @click="goBkb2()">
              <img src="static/img/t-px.png"   @click="isOrder = true ">

              <div class="ttp" v-if="isOrder == true">
                <p :class="{ cur: order_type == 'default' }"  @click="OrderBy('default') ">默认排序</p>
                <p  :class="{ cur: order_type == 'time' }" @click="OrderBy('time') ">时间排序</p>
                <p  :class="{ cur: order_type == 'class' }" @click="OrderBy('class') ">班级排序</p>
              </div>

              <el-input v-model="keyword"  style="width: 223px;" class="fl search-inp"   placeholder="输入名称搜索"></el-input><el-button class="fl">搜索</el-button>
            </div>
          </div>
            <div class="clear"></div>

            <ul class="bkb-list-gr"    v-if="listData.length>0">
              <template v-for="(item, i) in listData">
              <li>
                <img class="pic" :src="item.cover_image" />
                <div class="txt">
                  <p><span class="tit">{{ item.title }}</span> </p>
                  <p><label class="   ">课件：{{ item.number }}</label> <label class="date fr ">{{ item.createtime_text }}</label> 班级： <template v-for="(vo, j) in item.class_list">
                    {{ vo.name }}&nbsp;
                  </template></p>
                  <p><label class="txt-l" @click="$router.push('/courseView')"><img src="static/img/t-pc.png"> 授课</label>

                  <span class="txt-r">
                  <label class="top mr40"  @click="setTop(i,item) ">置顶</label>
                  <label class="edit mr40"  @click="editInfo(i,item) ">修改</label>
                  <label class="download mr40"   @click="downloadInfo(i,item) ">下载</label>
                  <label class="delete  mr40"    @click="delInfo(i,item) " >删除</label>
                  <label class="share  "  @click="shareInfo(i,item) ">分享</label></span>  </p>
                </div>
              </li>   </template>
            </ul>

            <el-empty :image-size="200" v-else></el-empty>
            <div class="page-area" v-if="listData.length>0">
              <span type="button" class="btn-home fl" style="cursor: pointer;"
                    @click="getCatList(order_type, current, 1,   keyword ,0)">首页</span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :current-page="currentPage"
                :total="total"
                :page-size="1"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr"
                    @click="getCatList(order_type, current, total, keyword,0)">尾页</span>
            </div>
          </div>

        </div>
        <div class="main-right  ">

          <div class="con-menu "  @click="openYun()">
            <div class="menu-img">
              <img src="static/img/r-ykt.png" alt="">
            </div>
            <div class="menu-item">
              中华经典云课堂
            </div>
          </div>


          <div class="con-menu2"  @click="goRes()">
            <div class="menu-img">
              <img src="static/img/r-upload.png" alt="">
            </div>
            <div class="menu-item">
              上传备课包
            </div>
          </div>
          <div class="con-menu2"  @click="goSpace()">
            <div class="menu-img">
              <img src="static/img/r-xj.png" alt="">
            </div>
            <div class="menu-item">
              新建备课包
            </div>
          </div>


          <div class="con-menu2"  @click="goLessonsAdd()">
            <div class="menu-img">
              <img src="static/img/r-gx.png" alt="">
            </div>
            <div class="menu-item">
              共享资源包
            </div>
          </div>
          <div class="con-menu2"  @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt="">
            </div>
            <div class="menu-item">
              首页
            </div>
          </div>




        </div>
      </div>
    </div>

<div class="step_task"  v-if="isTask == true">
  <div class="do"> <img src="static/img/t-down.png" alt=""></div>
<ul>
  <li >   您有三个打包任务     <span class="fr">一个已完成</span></li>

</ul>授课
</div>


    <div class="commDig"  v-if="isDel == true">
      <div class="title"><span>删除</span>  <span class="closed"  @click="isDel = false"><img src="static/img/close.png"></span></div>
      <div class="cont">
<span class="tip-warn">确定要删除？</span>
      </div>
      <div class="mt30 baseAct width100"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">确定</button> </div>
    </div>



    <div class="commDig"  v-if="isShare == true">
      <div class="title"><span>分享</span>  <span class="closed"  @click="isShare = false"><img src="static/img/close.png"></span></div>
      <div class="cont">
        <p class="tit">请选择分享位置</p>

        <p class="mt30">
        <el-select
          style="width: 300px; float: left;"
          v-model="value2"
          filterable
          allow-create
          default-first-option
          placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </p>
      </div>
      <div class="mt30 baseAct width100"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">确定</button> </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue';
export default {
  data() {
    return {
      isOrder:false,
      isTask:false,
      isOpen:false,
      order_type:'default',
      total:0,
      page:1,
      page_size:9,
      current: -1,
      categoryId: '',
      currentPage: 1,
      cid:0,
      yun:{
        total:0,
        page:1,
        page_size:9,
        current: -1,
        categoryId: '',
        currentPage: 1
      },
      yunClass :[],
      listYunData:[],
      grades_id: '',
      sort: '',
      keyword: '', //搜索值,
      listData:[],
      isDel:false,
      isShare:false,
      value:[],
      options2: [{
        value: '全网',
        label: '全网'
      }, {
        value: '本校',
        label: '本校'
      } ],
      value2: []};
  },
  created() {
    this.handleCurrentChange(1);
  },
  methods: {
    getCatList(order_type, index, page = 1, keyword,del = 0) {
      if (page == 1) {
        this.currentPage = 1;
      } else if (page == this.total) {
        this.currentPage = this.total;
      }
      this.page = page
      this.order_type = order_type;
      this.current = index;
      this.keyword = keyword;

      let all_form = {
        order_type: this.order_type,
        page: this.page,
        limit: this.page_size,
        del: del,
        search: this.keyword
      };
      this.$api('resources.myBclassList', all_form).then(res => {
        this.listData = res.data.data;
        this.total = res.data.last_page;
      });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getCatList(this.order_type, this.current, page, this.keyword,0);
    },
    OrderBy(type) {
      this.order_type = type;
      this.isOrder = false;
    },

    getYunClass() {
      this.$api('cloud.class', {}).then(res => {
        this.yunClass  = res.data ;
        this.cid = this.yunClass[0].id;
      });
    },
    getYunList() {
      this.$api('cloud.room', {cid:this.cid}).then(res => {
        this.listYunData = res.data.data;
        this.yun.total = res.data.last_page;
      });
    },
    openYun(){
      this.isOpen = true;
      this.getYunClass();
      this.getYunList();
    },
    selectCh(index,id){
      this.cid = id;
      this.getYunList();
    },
    setTop(index,item){
      this.$api('resources.setWeigh', {id:item.id}).then(res => {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
      });
    },
    editInfo(index,item){
    //  this.cid = item.id;
      this.$router.push("/lessonsadd");
    },
    downloadInfo(index,item){
      this.cid = item.id;
      this.getYunList();
    },
    delInfo(index,item){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api("resources.delBclass", {id: item.id}).then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.form = {};
            this.handleCurrentChange(1);
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    shareInfo(index,item){
      this.cid = item.id;
      this.getYunList();
    },
    goSc(){
      this.$router.push("/recycle");
    },
    goSpace(){
      this.$router.push("/space");
    },
    goLessonsAdd(){
      this.$router.push("/lessonsAdd");
    },
    goLessons(){
      this.$router.push("/lessonsList");
    },
    goRes(){
      this.$router.push("/courseList");
    },
    goBkb(){
      this.$router.push("/lessonsadd");
    },
    goDetail(){
      this.$router.push("/courseView");
    },
    goHome() {
		  this.$router.push(localStorage.getItem('jump_path'));
      // if( localStorage.getItem('jump_path') == '/index' ){
      //   this.$router.push('/index');
      // }else if( localStorage.getItem('jump_path') == '/lecture' ){
      //   this.$router.push('/lecture');
      // }else if( localStorage.getItem('jump_path') == '/train' ){
      //   this.$router.push('/train');
      // }
    }
  },
  components:{Header}
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
